<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>图书管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="/static/css/public.css" media="all">

</head>
<body>

<table class="layui-table" id="test" lay-filter="demo">
</table>


<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <a href="/addBook.html" class="layui-btn layui-btn-sm">新增图书</a>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">批量删除</button>
    </div>
</script>


<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<!--    书籍详情-->
<div id="layer_notice" style="display: none">
    <div class="book-base-info">
        <div class="book-cover">
            <img src="https://img1.baidu.com/it/u=1930696192,795775478&fm=26&fmt=auto" alt="">
        </div>
        <div class="book-info">
            <div class="book-name">书名</div>
            <div class="book-author">作者</div>
            <div class="book-publisher">出版社</div>
            <div class="book-pub-time">出版日期</div>
        </div>
    </div>
    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
        <ul class="layui-tab-title">
            <li class="layui-this">馆藏位置</li>
            <li>内容简介</li>
            <li>作者简介</li>
        </ul>
        <div class="layui-tab-content" style="height: 100px;">
            <!--                位置信息-->
            <div class="layui-tab-item layui-show">
                <div class="local-box">6楼46行A面3架</div>
                <div class="real-book-list">
                    <div class="real-book-item">
                        <span>1</span>
                        <span style="color: #FF5722">2021.08.23 应还</span>
                    </div>
                    <div class="real-book-item">
                        <span>1</span>
                        <span style="color: #5FB878">2021.08.23 可借</span>
                    </div>
                    <div class="real-book-item">
                        <span>1</span>
                        <span style="color: #FF5722">2021.08.23 应还</span>
                    </div>
                    <div class="real-book-item">
                        <span>1</span>
                        <span style="color: #FF5722">2021.08.23 应还</span>
                    </div>
                    <div class="real-book-item">
                        <span>1</span>
                        <span style="color: #FF5722">2021.08.23 应还</span>
                    </div>
                </div>
            </div>
            <!--                位置信息-->

            <!--                内容简介-->
            <div class="layui-tab-item">
                <div style="padding-left: 5px;font-weight: 700;margin-bottom: 5px">内容简介</div>
                <p class="book-desc">
                    300年历史的长时段剖析
                    人工智能时代打工人的启示录
                    AI 革命，革的是谁的命？
                    ★ 英国《金融时报》2019年度最佳书籍
                    ★ 芝加哥大学推荐必读书目
                    ★ 北京大学光华管理学院教授刘学、中国人民大学经济学院教授高德步、青年社会学家廉思重磅推荐
                    ◎ 内容简介
                    每一次重大的技术变革，都会给社会的主要工作形态带来深刻的影响。
                    本书系统而全面地回顾了近几百年技术进步的历史，以及它如何从根本上改变了社会成员之间的经济和政治权力分配。
                    本书作者将带领读者们遍览各个时代技术进步对人们工作形态的影响，揭示不同时代“打工人”的处境，并最终将目光转向未来，试图分析当前的AI革命将对我们的工作造成何种影响，以及我们该如何做出应对。作者力图说明，技术进步对收入造成何种影响，将决定人们对它的态度。
                    工业革命是历史上的重大时刻，但当时几乎没有人意识到它的巨大后果。
                    正如本书所表...
                </p>
            </div>
            <!--                内容简介-->

            <!--                作者简介-->
            <div class="layui-tab-item">
                <div style="padding-left: 5px;font-weight: 700;margin-bottom: 10px">作者简介</div>
                <div class="author-name">
                    卡尔·贝内迪克特·弗雷
                </div>
                <p class="author-desc">
                    卡尔·贝内迪克特·弗雷（Carl Benedikt Frey），牛津马丁花旗会士，牛津新经济思维研究所高级研究员。
                    在牛津大学马丁学院主持有关工作之前景的项目。他是一位知名的经济学家和经济史学家，
                    同时担任二十国集团、经合组织、联合国、欧盟以及多家大企业的顾问。
                </p>
            </div>
            <!--                作者简介-->

        </div>
    </div>
</div>
<!--    书籍详情-->


<script src="/static/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="/static/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    layui.use('table', function () {
        let table = layui.table,
            $ = $$ = layui.jquery;


        table.render({
            elem: '#test',
            url: '/common/category',
            toolbar: '#toolbarDemo',
            title: '用户数据表',
            totalRow: true,
            cols: [
                [
                    {type: 'checkbox', fixed: 'left'},
                    {field: 'bookId', title: 'ID', width: 120},
                    {field: 'name', title: '书名', width: 120},
                    {field: 'category', title: '分类', width: 120},
                    {field: 'author', title: '作者', width: 120},
                    {field: 'publisher', title: '出版社', width: 120},
                    {field: 'pubTime', title: '出版时间', width: 120},
                    {fixed: 'right', title: '操作', align: 'center', toolbar: '#barDemo'}
                ]
            ],
            page: true,
            response: {
                statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
            },
            parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.total, //解析数据长度
                    "data": res.data //解析数据列表
                };
            }
        });


        //监听工具条
        table.on('tool(demo)', function (obj) {
            var data = obj.data;
            if (obj.event === 'detail') {
                clickBook(1)
            } else if (obj.event === 'del') {
                clickBook(2)
            } else if (obj.event === 'edit') {
                clickBook(3)
            }
        });


        function clickBook(index) {
            let that = this;
            //多窗口模式，层叠置顶
            layer.open({
                type: 1,
                title: 'xxxxx',
                area: ['500px', '350px'],
                shade: 0,
                content: $$('#layer_notice'),
                zIndex: layer.zIndex,
                success: function (layero, index) {

                },
            });
        }


    });

</script>
</body>
</html>
